<template>

    <TmpModal 
        ref="childComponent" 
    />
    
    <!-- <uv-modal
        ref="modal4"
        :content="content"
        showCancelButton
        asyncClose
        @confirm="confirm4"
        @cancel="cancel"
        @close="close"
    ></uv-modal> -->

    <view class="article-footer">

        <!-- 隐藏VIP按钮 -->
        <!-- <view class="article-vip">
            <view class="article-vip-item">
                <uv-button
                            text="开通VIP观看全文"
                            size="large"
                            type="primary"
                ></uv-button>
            </view>
        </view> -->

        <view class="article-feedback" v-if="isVip ==false">
            <view class="article-feedback-item">
                <uv-button
                    text="无用"
                    size="normal"
                    icon="map"
                    plain
                    type="warning"
                ></uv-button>
            </view>
                <view class="article-feedback-item">
                    <uv-button
                        text="有用"
                        size="normal"
                        icon="map"
                        plain
                        type="warning"
                        iconColor="#D4D6DD"
                    ></uv-button>
            </view>
        </view>

        
        <view class="custom-tabbar">
            <view class="tabbar-item" @click="handleTabbarChange('useful')">
                <view class="tabbar-item-icon">
                    <uv-icon name="thumb-up" :color="localFeedbackStatus.useful  ? '#2979ff' : '#333'" size="24"></uv-icon>
                </view>
                <text class="tabbar-item-text" :class="{ active: localFeedbackStatus.useful }">有用</text>
            </view>
                            <view class="tabbar-item" @click="handleTabbarChange('useless')">
                <view class="tabbar-item-icon">
                    <uv-icon name="thumb-down" :color="localFeedbackStatus.useless  ? '#2979ff' : '#333'" size="24"></uv-icon>
                </view>
                <text class="tabbar-item-text" :class="{ active: localFeedbackStatus.useless }">无用</text>
            </view>

            <view class="tabbar-item" @click="handleTabbarChange('like')">
                <view class="tabbar-item-icon">
                    <uv-icon name="star" :color="localFeedbackStatus.like  ? '#2979ff' : '#333'" size="24"></uv-icon>
                </view>
                <text class="tabbar-item-text" :class="{ active: localFeedbackStatus.like }">收藏</text>
            </view>

            <view class="tabbar-item" @click="handleTabbarChange('like')">
                <view class="tabbar-item-icon">
                    <uv-icon name="chat-fill" :color=" '#333'" size="24"></uv-icon>
                </view>
                <text class="tabbar-item-text" >评论</text>
            </view>

            <view class="tabbar-item" @click="handleTabbarChange('')">
                <view class="tabbar-item-icon">
                    <uv-icon name="share" :color="'#333'" size="24"></uv-icon>
                </view>
                <text class="tabbar-item-text" >分享</text>
            </view>

            <!-- <view class="tabbar-item" @click="handleTabbarChange(2)">
                <view class="tabbar-item-icon">
                    <uv-icon name="star" :color="value === 2 ? '#2979ff' : '#909399'" size="24"></uv-icon>
                </view>
                <text class="tabbar-item-text" :class="{ active: value === 2 }">210k</text>
            </view>

            <view class="tabbar-item" @click="handleTabbarChange(3)">
                <view class="tabbar-item-icon">
                    <uv-icon name="chat" :color="value === 3 ? '#2979ff' : '#909399'" size="24"></uv-icon>
                </view>
                <text class="tabbar-item-text" :class="{ active: value === 3 }">210k</text>
            </view>

            <view class="tabbar-item" @click="handleTabbarChange(4)">
                <view class="tabbar-item-icon">
                    <uv-icon name="share" :color="value === 4 ? '#2979ff' : '#909399'" size="24"></uv-icon>
                </view>
                <text class="tabbar-item-text" :class="{ active: value === 4 }">分享</text>
            </view> -->

        </view>

    </view>

</template>

<script>
    import TmpModal from '@/components/common/tmp-modal.vue'
    import request from '@/common/tools/tools-request.js'

    export default {
        components: {TmpModal},
        name: 'tmpArticleFooter',
        data(props) {
            return {
                value: 0,
                articleVip: true,
                userIsVip: false,
                isVip: true,
                //articlCode: props.articleCode,
                //sourceType: props.sourceType,
                localFeedbackStatus: {
                    like: props.feedbackStatus?.like || false,
                    useful: props.feedbackStatus?.useful || false,
                    useless: props.feedbackStatus?.useless || false
                }
                  
            }
        },
        props: {
            articleCode: {
                type: String,
                required: true
            },
            sourceType: {
                type: String,
            },
            feedbackStatus: {
                type: Object
            }
        },
        watch: {
            feedbackStatus: {
                handler(newVal) {
                    if (newVal) {
                        this.localFeedbackStatus = {
                            like: newVal.like || false,
                            useful: newVal.useful || false,
                            useless: newVal.useless || false
                        };
                    }
                },
                immediate: true
            }
        },
        methods: {

            childComponent(){
                this.$refs.childComponent.showLogin()
            },

            handleTabbarChange(feedbackType) {
                //console.log(this.articleCode);

                // uni.showToast({
                //     loading: true,
                //     title: '提交中',
                //     icon: 'loading'
                // });

                this.submitFeedback(feedbackType);
                //console.log()
            },
            submitFeedback(feedbackType ) {

                if (!feedbackType) {
                    return;
                }

                request.post({
                    url: '/api/feedback/store',
                    data: {
                        sourceCode: this.articleCode,
                        sourceType: this.sourceType,
                        feedbackType: feedbackType,
                    }
                }).then(res => {

                    // switch(feedbackType) {
                    //     case 'like':
                    //         this.feedbackStatus.like = res.data.like;
                    //         break;
                    //     case 'useful':
                    //         this.feedbackStatus.useful = res.data.useful;
                    //         break;
                    //     case 'useless':
                    //         this.feedbackStatus.useless = res.data.useless;
                    //         break;
                    // }

                    
                    // 更新本地状态
                    this.localFeedbackStatus = res.data.feedbackStatus;

                    console.log(res.data);

                    // uni.showToast({
                    //     loading: true,
                    //     title: '处理完成',
                    //     icon: 'success'
                    // });

                }).catch(err => {
                    
                    //调用TmpModal的弹窗事件
                    this.childComponent();

                    //this.$refs.modallogin.open();
                    /*
                    uni.showToast({
                        loading: true,
                        title: '请求失败，请重新提交',
                        icon: 'error'
                    });
                    */
                    console.error('提交反馈失败:', err);
                });
            }
        },
    }
</script>

<style scoped>

    .article-footer{
        padding-bottom: 100px;
    }

    .article-vip{
        /*margin: 40px 60px; */
        width: 100%; 
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40rpx;
    }

    .article-vip-item{
        width: 75%;
    }

    .article-feedback{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 32rpx;
        margin: 32rpx 0 0 0;
    }

    .article-feedback-item{
        width: 35%;
    }
    
    .custom-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        background-color: #ffffff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
        z-index: 999;
    }

    .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        position: relative;
    }

    .tabbar-item-icon {
        position: relative;
        margin-bottom: 4rpx;
    }

    .tabbar-item-dot {
        position: absolute;
        top: -4rpx;
        right: -4rpx;
        width: 16rpx;
        height: 16rpx;
        background-color: #ff4d4f;
        border-radius: 50%;
    }

    .tabbar-item-text {
        font-size: 24rpx;
        color: #333;
        line-height: 1;
    }

    .tabbar-item-text.active {
        color: #2979ff;
    }

</style>
